<template>
  <div class="app-container">
    <!-- 顶部标题 -->
    <div class="header">
      <img class="header-tit" src="@/assets/images/material/header_title.png" alt="">
      <div class="header-btn">
        <div class="btn" @click="upFodder">上传素材</div>
        <div class="btn">数据详情</div>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="center-con">
      <!-- 数据来源 -->
      <div class="data-source">
        <img class="left-title" src="@/assets/images/material/left_title.png" alt="">
        <div class="source-list">
          <div class="source-item" v-for="(item, index) in sourceList" :key="index">{{ item }}</div>
        </div>
        <img class="left-title" src="@/assets/images/material/topic_title.png" alt="">
        <div class="source-list topic-bg">
          <div class="topic-item" v-for="(topic, index) in topicList" :key="topic.id">
            <div class="item-left">
              <div class="title">{{ index + 1 }}、{{ topic.title }}</div>
              <div class="summary">{{ topic.summary }}</div>
            </div>
            <div class="item-right">
              <div class="value">热度值{{ topic.value }}</div>
              <div class="date">{{ parseTime(topic.date, '{y}-{m}-{d}') }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 数据总量 -->
      <div class="data-gross">
        <div class="map-num">
          数据总量 <span class="num">{{ totalCount }}</span>
        </div>
        <!-- <div style="height: 520px;">
            图
          </div> -->
        <img class="map" src="@/assets/images/map.png" alt="">
      </div>
      <!-- 模态分布 -->
      <div class="right-mode">
        <img class="right-title" src="@/assets/images/material/right_title.png" alt="">
        <div class="data-bg-ring">
          <PieChart :chartData="pieChart"></PieChart>
        </div>
        <img class="right-title" src="@/assets/images/material/right_title1.png" alt="">
        <div class="data-bg-column">
          <BarChart :chartData="metaCountList"></BarChart>
        </div>
      </div>

    </div>
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="940px" append-to-body>
      <div class="upload-box">
        <div class="upload-item">
          <image-upload ref="imgUpload" :fileType="['jpg', 'png', 'webp','mp4','avi','mov','flv']" :isShowTip="false" @input="uploadImg" @onProgress="uploadProgress">
            <div class="up-tips">
              <img class="up-icon" src="@/assets/images/material/up2.png" alt="">
              <div class="title">点击上传</div>
              <div class="tips">支持txt、jpg、png、webp、mp4、avi、mov、flv格式</div>
            </div>
          </image-upload>
        </div>
      </div>

      <div class="upload-btn">
        <el-tabs v-model="activeName" @tab-click="handleTab">
          <el-tab-pane label="正在上传" name="loading"></el-tab-pane>
          <el-tab-pane label="上传完成" name="success"></el-tab-pane>
        </el-tabs>

        <!-- 总的进度条 -->
        <div v-if="isShowProgress && isBatchUpload" style="display: flex; align-items: center;">
          上传进度:
          <el-progress :percentage="parseInt(totalUploadPercent)" style="width: 300px; margin-left: 10px;"></el-progress>
        </div>

        <div class="right-btn">
          <el-button type="text" @click="startUpdate()">开始上传</el-button>
        </div>
      </div>
      <!-- 已选图片列表 -->
      <div class="file-list" v-if="activeName == 'loading'">
        <el-table :data="fileNoSuccess" size="small" height="350px">
          <el-table-column label="序号" align="center" type="index" />
          <el-table-column label="文件名" align="center" prop="name" :show-overflow-tooltip="true" />
          <el-table-column label="大小" align="center" prop="workOpen">
            <template slot-scope="scope">
              {{ (scope.row.file.size/ 1024).toFixed(0) }}KB
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="collectPlatform">
            <template slot-scope="scope">
              <div class="icon-success" v-if="scope.row.isSuccess == 'success'" type="success">上传成功 <i
                  class="el-icon-success"></i></div>
              <div class="icon-error" v-else-if="scope.row.isSuccess == 'error'" type="danger">上传失败<i
                  class="el-icon-warning"></i></div>
              <div class="icon-load" v-else-if="scope.row.isSuccess == 'loading'" type="warning">上传中 {{ scope.row.percent }} % <i
                  class="el-icon-loading"></i></div>
              <div class="icon-ready" v-else type="warning">待上传<svg-icon icon-class="times" class-name='custom-class' />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleUpdate(scope.row, scope.$index)"
                v-if="scope.row.isSuccess == 'error'">重新上传</el-button>
              <el-button size="mini" type="text" v-if="scope.row.isSuccess == 'ready'" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 已上传列表 -->
      <div class="file-list" v-else>
        <el-table :data="recordList" v-loading="successLoading" element-loading-background="rgba(255, 255, 255, 0.8)" size="small" height="350px">
          <el-table-column label="序号" align="center" type="index" />
          <el-table-column label="文件名" align="center" prop="fileName" :show-overflow-tooltip="true"/>
          <el-table-column label="大小" align="center" prop="fileSize">
            <template slot-scope="scope">
              {{ (scope.row.fileSize / 1024).toFixed(0) }}KB
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="collectPlatform">
            <template slot-scope="scope">
              <div class="icon-success" type="success">上传成功 <i
                  class="el-icon-success"></i></div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
                v-if="scope.row.isSuccess == 'error'">重新上传</el-button>
              <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          size="mini"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getRecordList"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMaterialStatistics,getRecordList, queryTopicList, queryMetaCountList } from "@/api/material/material";
import BarChart from "../../dashboard/BarChart.vue";
import LineChart from "../../dashboard/LineChart.vue"
import PieChart from "../../dashboard/PieChart.vue"
export default {
  name: "Config",
  dicts: ['sys_yes_no'],
  components: { BarChart, LineChart, PieChart },
  data() {
    return {
      loading: true,
      title: "素材录入",
      open: false,
      chartData: {},
      pieChart: {},
      fileList: [],
      recordList:[],
      activeName: 'loading',
      totalCount: null,//数据总量
      sourceList: [],//数据来源
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      topicList: [],
      metaCountList: [],
      successLoading: false, // 上传成功tab的表格加载状态
      isBatchUpload: false
    };
  },
  computed: {
    // 总的上传进度条
    totalUploadPercent() {
      if(this.getUploadList.length === 0) return 0;
      let percent = 0;
      let total = this.getUploadList.length * 100;

      percent = this.getUploadList.reduce((sum, n) => {
        return sum + n.percent
      }, 0);
      console.log(percent, total);
      const uploadPercent = percent / total;
      console.log(uploadPercent, 'uploadPercent')
      return uploadPercent * 100;
    },
    // 点击开始上传时,本次上传的文件列表,用于计算进度条
    getUploadList() {
      return this.fileList.filter(item => item.isUpload === true);
    },
    // 过滤出不包含成功的列表
    fileNoSuccess() {
      return this.fileList.filter(item => item.isSuccess !== 'success');
    },
    // 待上传文件列表
    readyFileList() {
      return this.fileList.filter(item => item.isSuccess == 'ready')
    },
    isShowProgress() {
      const file = this.getUploadList.filter(item => item.isSuccess == 'loading' || item.isSuccess == 'ready')
      return file.length > 0
    }
  },
  created() {
    this.getMaterialStatistics();
    this.queryTopicList()
    this.queryMetaCountList()
  },
  methods: {
    /** 查询参数列表 */
    getMaterialStatistics() {
      this.loading = true;
      getMaterialStatistics().then(response => {
        console.log(response)
        // 数据总量
        this.totalCount = response.data.totalCount
        // 模态分布
        const typeCount = response.data.typeCount
        const actualData = [
          {
            value: typeCount.image,
            name: '图片'
          },
          {
            value: typeCount.text,
            name: '文本'
          },
          {
            value: typeCount.video,
            name: '视频'
          }
        ]
        this.pieChart = {
          expectedData: ['图片', '文本', '视频'],
          actualData
        }
        // 数据来源
        this.sourceList = response.data.totalGroups
      });
    },
    // 查询已上传记录
    getRecordList() {
      this.successLoading = true;
      getRecordList(this.queryParams).then(response => {
        console.log(response)
        this.total = response.total
        this.recordList = response.rows
      }).finally(() => {
        this.successLoading = false;
      });
    },
    cancel() { },
    submitForm() { },
    upFodder() {
      this.open = true
      this.fileList = [];
    },
    handleTab(e) {
      console.log(e.name)
      if(e.name === 'success') {
        this.getRecordList()
      }
    },
    // 上传图片
    uploadImg(list) {
      console.log(list)
      list.map(item => item.isUpload = false)
      console.log(list, '========')
      this.fileList = list
    },
    // 开始上传
    async startUpdate() {
      if(this.readyFileList.length === 0) {
        return this.$message.warning('当前无待上传状态文件');
      }
      this.readyFileList.map(item => item.isUpload = true)
      this.isBatchUpload = true;

      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].isSuccess == 'ready') {
          this.fileList[i].isSuccess = 'loading'
          setTimeout(() => {
            this.$refs.imgUpload.uploadFile(this.fileList[i], i).then(res => {
              this.fileList[i].isSuccess = 'success'
            }).catch((err) => {
              console.log(err, '失败')
              this.fileList[i].isSuccess = 'error'
            })
          }, 2000 * i)
        }
      }
    },
    // 重新上传
    handleUpdate(item, index) {
      item.percent = 0;
      item.isSuccess = 'loading'
      this.isBatchUpload = false;
      this.$refs.imgUpload.uploadFile(item, index).then(res => {
        console.log(res, '上传成功!')
        item.isSuccess = 'success'
        this.$message.success('上传成功!')
      }).catch((err) => {
        console.log(err, '上传失败!')
        item.isSuccess = 'error'
        this.$message.error('上传失败!')
      })
    },
    // 删除图片
    handleDelete(item) {
      console.log(item)
      this.fileList.splice(this.fileList.indexOf(item), 1)
    },
    // 获取话题列表
    queryTopicList() {
      queryTopicList().then(response => {
        const result = response?.data || []
        this.topicList = result.slice(0, 6); // 取7条数据
      });
    },
    // 获取趋势列表
    queryMetaCountList() {
      queryMetaCountList().then(response => {
        this.metaCountList = response?.data || []
      });
    },
    uploadProgress(percent, index) {
      console.log(percent, '=============我是回调函数里的')
      this.$set(this.fileList[index], 'percent', percent)
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 0;
}

.header {
  position: relative;

  .header-tit {
    width: 100%;
  }

  .header-btn {
    position: absolute;
    top: 20px;
    left: 50px;
    right: 50px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.center-con {
  display: flex;
  justify-content: space-between;
  margin: -65px 20px 0;

  .data-source {
    width: 504px;

    .left-title {
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .source-list {
      height: 228px;
      background-image: url("../../../assets/images/material/source_bg.png");
      background-size: 100%;
      background-repeat: no-repeat;
      color: #fff;
      overflow: hidden;

      .source-item {
        float: left;
        width: 97px;
        height: 38px;
        line-height: 38px;
        background-image: url("../../../assets/images/material/item_bg.png");
        background-size: cover;
        color: #00FCFF;
        margin-left: 23px;
        margin-top: 15px;
        text-align: center;
        white-space: nowrap;
        /* 不换行 */
        overflow: hidden;
        /* 隐藏超出的内容 */
        text-overflow: ellipsis;
        /* 添加省略号 */
        padding: 0 8px;
      }

      .source-item:nth-child(1n) {
        color: #FF0000;
      }

      .source-item:nth-child(2n) {
        background-image: url("../../../assets/images/material/item_bg1.png");
        color: #00FCFF;
      }

      .source-item:nth-child(3n) {
        background-image: url("../../../assets/images/material/item_bg2.png");
        color: #FFA800;
      }

      .source-item:nth-child(4n) {
        background-image: url("../../../assets/images/material/item_bg3.png");
        color: #FF6B00;
      }

      .source-item:nth-child(5n) {
        background-image: url("../../../assets/images/material/item_bg4.png");
        color: #FFFFFF;
      }

      .source-item:nth-child(6n) {
        background-image: url("../../../assets/images/material/item_bg5.png");
        color: #00FF75;
      }

      .source-item:nth-child(7n) {
        background-image: url("../../../assets/images/material/item_bg6.png");
        color: #154DDC;
      }
    }

    .topic-bg {
      height: 446px;
      background-image: url("../../../assets/images/material/topic_bg.png");
      padding: 24px;
      .topic-item + .topic-item {
        margin-top: 23px;
      }
      .topic-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item-left {
          flex: 1;
          margin-right: 20px;
          min-width: 0;
          .title {
            color: #ffffff;
            font-size: 16px;
            font-weight: bold;
            line-height: 22px;
            margin-bottom: 6px;
          }
          .summary {
            color: #ffffff;
            font-size: 12px;
            font-weight: normal;
            line-height: 17px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .item-right {
          flex: 85px 0 0;
          text-align: right;
          .value {
            font-size: 16px;
            line-height: 22px;
            margin-bottom: 6px;
            font-style: normal;
            font-weight: 55 Regular;
            line-height: normal;
            background: linear-gradient(90deg, #FF7D7D 0%, #F53030 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
          }
          .date {
            color: #ffffff;
            font-size: 12px;
            line-height: 17px;
          }
        }
      }
    }
  }

  .data-gross {
    flex: 1;
    background-image: url("../../../assets/images/material/gross_bg.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;

    .map-num {
      font-size: 24px;
      color: #fff;
      text-align: center;
      margin-top: 70px;
      font-family: 'PangMenZhengDao-3';

      .num {
        width: 200px;
        text-align: center;
        display: inline-block;
        color: rgba(0, 252, 255, 1);
        border: 1px dashed rgba(34, 177, 240, 0.45);
        background: rgba(14, 181, 255, 0.1);
        padding: 5px 10px;
        margin-left: 10px;
      }
    }

    .map {
      width: 80%;
      margin-top: 40px;
    }
  }

  .right-mode {
    width: 504px;

    .data-bg-ring {
      height: 288px;
      background-image: url("../../../assets/images/material/ring_bg.png");
      background-size: 100%;
      background-repeat: no-repeat;
    }

    .data-bg-column {
      height: 386px;
      background-image: url("../../../assets/images/material/column_bg.png");
      background-size: 100%;
      background-repeat: no-repeat;
    }

    .right-title {
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
}

img {
  width: 100%;
}

.upload-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;

  .upload-item {
    width: 100%;
    height: 210px;
    border: 1px dashed #D4DEEA;
    text-align: center;

    .up-tips {
      display: flex;
      flex-flow: column;
      align-items: center;
      margin-top: 30px;

      .up-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
      }

      .title {
        font-size: 16px;
        color: #000;
        height: 30px;
        line-height: 30px;
      }

      .tips {
        font-size: 14px;
        color: #676767;
        height: 30px;
        line-height: 30px;
      }
    }
  }
}

.upload-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-success {
  color: #09B844;

  i {
    margin-left: 5px;
  }
}

.icon-error {
  color: #F02929;

  i {
    margin-left: 5px;
  }
}

.icon-load {
  color: #FFC700;

  i {
    margin-left: 5px;
  }
}

.icon-ready {
  color: #757272;

  .svg-icon {
    margin-left: 5px;
  }
}

.file-list {
  // height: 400px;
  // overflow-y: scroll;
}

::v-deep {
  .el-upload--picture-card {
    background: none;
    border: none;
    width: 100%;
    height: 210px;
  }

  .el-tabs__nav-wrap::after {
    background: none;
  }
}
</style>
